<template>
  <div>
    <div class="box">
        <div class="dv">
            <div  class="dv1" v-for="(v,index) in arr" :key="index">
                    <img :src="v.src" alt="">
                    <p>{{v.txts}}</p> 
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import axios from "axios"
let service = axios.create()
export default {
    data(){
        return {
            arr:[],
        }
    },
      mounted(){
    service({
            url:"http://localhost:3000/lhstore",
            method:"get"
        }).then(res=>{
            this.arr = res.data
        })
  }
}
</script>

<style scoped>
   
    ::-webkit-scrollbar { 
        display: none;
    }
    .box {
        width: 100%;
        height: 190px;
        background-color: #fff;
        overflow: auto;
    }
    .dv {
        width: 140%;
        height: 190px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .dv .dv1 {
        width: 75px;
        height: 84px;
        text-align: center;
    }
  
    .dv  img {
        width: 55px;
        height: 55px;
    }
    .dv .dv1 p {
        color: #000000;
        font-size: 12px;
        height: 17px;
    }
    .box2 {
        width: 5px;
        height: 5px;
        background-color: red;
        border-radius: 50%;
        margin-left: 4px;
    }
    .bottom {
        width: 100%;
        height: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

    }
</style>